<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>会员系统</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
      <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 开关 CSS 文件 -->
    <link rel="stylesheet" href="css/switch.css">
    <!-- 日历 CSS 文件 -->
    <link rel="stylesheet" href="css/cxcalendar.css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="member-wrap clearfix">
         <!-- 左侧导航 -->
         <div class="nav-left" >
            <div class="black-bg"></div>
            <ul>
                <li class="user-info"> 
                    <a href="">
                       <img src="images/user1.png" alt="" >
                       <p>Admin</p>
                    </a>
                </li>
                <li >
                    <a href="index.html">
                       <img src="images/icon1.png" alt="" style="width:25px">
                       <p>会员卡</p>
                    </a>
                </li>
                <li>
                    <a href="charge.html">
                       <img src="images/icon2.png" alt="" style="width:26px">
                       <p>充值</p>
                    </a>
                </li>
                <li class="active">
                    <a href="report.html">
                       <img src="images/icon3.png" alt="" style="width:25px">
                       <p>报表</p>
                    </a>
                </li>
                <li>
                    <a href="integral.html">
                       <img src="images/icon4.png" alt="" style="width:25px">
                       <p>积分兑换</p>
                    </a>
                </li>
                <li >
                    <a href="setting.html">
                       <img src="images/icon5.png" alt="" style="width:30px">
                       <p>设置</p>
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 右侧内容 -->
        <div class="member-main" >
            <!-- 顶部导航 -->
            <div class="nav-top clearfix">
                <a href="" class="left">
                   <img src="images/arrow-left.png" alt="">
                </a>
                <span>会员系统</span>
                <a href="" class="right">
                    <img src="images/help.png" alt="">
                </a>
            </div>
            <div class="member-content clearfix">
                <div class="member-lc">
                    <div class="member-lc-top">
                        <span>FROM</span><input id="date_first" name="mydate" type="text" readonly>
                        <span>TO</span><input id="date_last" type="text" class="input" size="12" readonly="">
                        <input type="submit" value="搜索">
                    </div>
                    <div class="member-lc-center">
                        充值报表
                    </div>
                    <div class="member-lc-bottom">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>操作时间</th>
                                        <th>会员</th>
                                        <th>付款时间</th>
                                        <th>实收金额（元）</th>
                                        <th>充值金额（元）</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>  
                                    </tr>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>
                                    </tr>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>  
                                    </tr>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>  
                                    </tr>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>
                                    </tr>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>  
                                    </tr>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>  
                                    </tr>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>
                                    </tr>
                                    <tr>
                                        <td>2016-05-06</td>
                                        <td>kenrich</td>
                                        <td>2016-05-06</td>
                                        <td>100.00</td>
                                        <td>100.00</td>  
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <ul class="page-nav clearfix">
                            <a href="" class="current">1</a>
                            <a href="" class="">2</a>
                            <a href="" class="">3</a>
                            <a href="" class="">4</a>
                            <a href="" class="">5</a>
                            <a href="" class="">6</a>
                            <a href="" class="">7</a>
                            <a href="" class="">8</a>
                            <a href="" class="">9</a>
                        </ul>
                    </div>
                    <div class="member-lc-tongji clearfix">
                        <ul class="member-lc-ta">
                            <li>今日合计</li>
                        </ul>
                        <ul class="member-lc-tb">
                            <li>银行卡：<span class="yellow">0.00</span></li>
                            <li>现金：<span class="yellow">0.00</span></li>
                            <li>第三方支付：<span class="yellow">0.00</span></li>
                        </ul>
                        <ul class="member-lc-tb">
                            <li>赠送：<span class="yellow">0.00</span></li>
                            <li>其他：<span class="yellow">0.00</span></li>
                        </ul>
                        <ul class="member-lc-tb">
                            <li>实收金额：<span class="yellow">0.00</span></li>
                            <li>赠送金额：<span class="yellow">0.00</span></li>
                            <li>充值金额：<span class="yellow">0.00</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> 

    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/cxcalendar.js"></script>   
    <script>
        // 双联动日期示例
        (function(){
          var dateFirst = $('#date_first');
          var dateLast = $('#date_last');
          var dateFirstApi;
          var dateLastApi;

          dateFirst.cxCalendar(function(api){
            dateFirstApi = api;
          });
          
          dateLast.cxCalendar(function(api){
            dateLastApi = api;
          });

          dateFirst.bind('change', function(){
            var firstTime = parseInt(dateFirstApi.getDate('TIME'), 10);
            var lastTime = parseInt(dateLastApi.getDate('TIME'), 10);

            if (lastTime < firstTime) {
              dateLastApi.clearDate();
            };

            dateLastApi.setOptions({
              startDate: firstTime
            });
            dateLastApi.gotoDate(firstTime);
            dateLastApi.show();
          });
        })();
    </script>
</body>
</html>